<template>
  <div class="list">
    <p>
      <span class="hh">直播状态:</span>
      <span>
        <el-select v-model="value" placeholder="请选择" @change="selectFn">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></span>
      <span class="hh">主播搜索:</span>
      <span
        ><el-input
          v-model="input"
          @input="findFn"
          placeholder="主播、ID"
        ></el-input
      ></span>
    </p>
    <div class="lists">
      <dl v-for="item in livelist" :key="item.id">
        <dt>
          <img :src="item.img" alt="" />
        </dt>
        <dd>
          <p>
            <span class="title">{{ item.title }}</span>
          </p>
          <p>
            <span class="name">{{ item.name }}</span
            ><span class="datas">{{ item.datas }}</span>
          </p>
          <p>
            <span class="xz" @click="jinru">{{ item.dw }}</span>
            <span class="zt">
              <!-- <template slot-scope="scope"> -->
              <el-switch
                v-model="item.flag"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>

              <!-- </template> -->
            </span>
          </p>
        </dd>
      </dl>
    </div>

    <div class="foot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.total"
        @current-change="changIndex"
      >
      </el-pagination>
    </div>
  </div>
</template>  


<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 12,
      total: 0,
      livelist: [],
      input: "",
      value: true,
      options: [
        {
          value: "1",
          label: "未直播",
        },
        {
          value: "0",
          label: "正在直播",
        },
        /*  {
          value: "选项3",
          label: "白人",
        },
        {
          value: "选项4",
          label: "黑人",
        },
        {
          value: "选项5",
          label: "庞婷婷",
        }, */
      ],
      value: "",
    };
  },
  created() {
    this.pageChange(1);
  },
  /*  watch: {
    input() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.pageChange(1);
      }, 700);
    },
  }, */
  methods: {
    selectFn(e) {
      console.log(1);
    },
    jinru() {
      this.$router.push("/kill/index3/livedetail");
      console.log(navigator.mediaDevices.enumerateDevices());
    },
    findFn() {
      this.pageChange();
    },
    pageChange(ind) {
      ind ? (this.pageIndex = ind) : "";
      this.$api
        .liveStreaming({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.input,
        })
        .then((res) => {
          if (res.code === 1) {
            this.livelist = res.data;
            this.total = res.total;
          } else {
            // 抛出包错
          }
        });
    },
    changIndex(e) {
      this.pageIndex = e;

      this.pageChange();
    },
  },
};
</script>

<style scoped lang="scss">
.list {
  width: 100%;
  height: 730px;
  /*  background: red; */
  p {
    display: flex;

    span {
      margin-left: 10px;
    }
    input {
      width: 230px;
      height: 30px;
    }
  }
  .hh {
    margin-top: 10px;
    margin-left: 10px;
  }
  .lists {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 670px;
    dl {
      padding: 20px;
      width: 16%;
      height: 48%;
      margin-left: 10px;
      dt {
        width: 100%;
        height: 70%;
      }
      dd {
        width: 100%;
        height: 30%;
      }
    }
    img {
      width: 270px;
      height: 190px;
    }
    .name {
      font-size: 15px;
      color: #8e8e8e;
    }
    .title {
      font-size: 17px;
      font-weight: 530;
    }
    .xz {
      color: #297fff;
      font-weight: 550;
    }
    .zt {
      margin-left: 110px;
    }
    .datas {
      margin-left: 60px;
      font-size: 12px;
    }
  }
}
</style>